import { useModel } from "umi";
import { Card, Descriptions, DescriptionsProps, Divider, Table } from "antd"


export default (props: { device: any; }) => {
  const { device } = props;
  console.log(device)

  const {hosts, routers} = useModel('networkModel')
  console.log(routers)

  const data = device.getModel().type == 'router' ? routers[device.getModel().id].fib.map(({ prefix, nexthop }) => ({
    key: prefix,
    network: prefix,
    nexthop: nexthop
  })) : []

  const columns = [
    {
      title: 'Prefix',
      dataIndex: 'network',
      key: 'network',
    },
    {
      title: 'Nexthop',
      dataIndex: 'nexthop',
      key: 'nexthop',
    },
  ];

  let terminalInfoItems: DescriptionsProps['items'] = device.getModel().type == 'host'?[{
    key: 1,
    label: 'IP',
    children: hosts[device.getModel().id].ip
  },{
    key: 2,
    label: 'Mask',
    children: '255.255.255.0'
  }]: []

  let terminalInfoDom = (
    <>
      <Descriptions title="Terminal Details" items={terminalInfoItems} />
    </>
  )

  return (
    <>
      {
        device.getModel().type == 'router' ? <><Divider orientation="left">FIB</Divider><Table size="small" dataSource={data} columns={columns} /></> : terminalInfoDom
      }

    </>
  )
}